<template>
  <div class="img" :style="note">

    <div style="width: 450px;height: 900px;background-color: rgba(0,0,0,0.01);margin:0px auto;text-align: center;position: relative">
      <div style="width: 450px;height: 700px;background-color: rgba(0,0,0,0.6);text-align: center;position: absolute;margin-top: 100px">
      <p style="font-size: 28px;font-family: '楷体';padding-top: 20px;color: slategray">完成项目录入</p>
      <hr style="width: 90%;height: 0.01px"/>
      <div style="margin-top: 20px">
        <div style="width: 100%">
          <form style="width: 100%">
            <p style="width: 100%;margin-left: 70px; text-align: left;color: slategray">请上传项目图片</p>
            <input type="file" @change="getFile($event)" style="color: slategray">
            <button class="button button-primary button-pill button-small" @click="submit($event)">提交</button>
          </form>
        </div>
        <div style="margin-top: 40px">
          <div style="width: 70%;margin-top: 30px;margin-left: 50px">
            <span class="demonstration"style="color: slategray">项目属性</span>
            <el-cascader
              :options="options"
              v-model="selectedOptions"
              @change="handleChange">
            </el-cascader>
          </div>
          <el-input v-model="InputName" placeholder="项目名称" style="width: 70%;margin-top: 30px"></el-input>
          <el-input v-model="InputPrice" placeholder="项目成交价格" style="width: 70%;margin-top: 30px"></el-input>

          <el-input v-model="userTime" placeholder="项目用时" style="width: 70%;margin-top: 30px"></el-input>
          <el-input type="textarea" :rows="2" placeholder="项目介绍" v-model="textarea" style="width: 70%;margin-top: 30px" ></el-input>
        </div>

        <div style="width: 100%">
          <form style="width: 100%">
            <p style="width: 100%;margin-left: 70px; text-align: left;color: slategray">请将项目的详细介绍以文件上传</p>
            <input type="file" @change="getFilee($event)">
            <button class="button button-primary button-pill button-small" @click="submite($event)">提交</button>
          </form>
        </div>

        <div style="width: 100%">
          <el-button plain style="margin-top: 20px;width: 100px" size="small" @click="register()">立即注册</el-button>
        </div>

      </div>

    </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        note: {
          backgroundImage: "url(" + require("../../assets/img/starrr.jpg") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "1890px 1500px",
        },
        id:'',
        InputName:'',
        InputPrice:'',
        userTime:'',
        textarea: '',
        file: '',
        filee: '',
        options: [
          {
            value: 'WEB后台',
            label: 'WEB后台',
            children: [
              {value: 'JAVA',
                label: 'JAVA',},
              {value: 'C#',
                label: 'C#',},
              {value: 'PHP',
                label: 'PHP',},
              {value: '其他',
                label: '其他',},
            ],
          },
          { value: 'WEB前端',
            label: 'WEB前端',
            children: [
              {value: 'VUE',
                label: 'VUE',},
              {value: 'HTML',
                label: 'HTML',},
              {value: 'JS',
                label: 'JS',},
              {value: '其他',
                label: '其他',},
            ]},
          {
            value: '移动端',
            label: '移动端',
            children: [
              {value: '微信小程序',
                label: '微信小程序',},
              {value: '微信公众号',
                label: '微信公众号',},
              {value: '支付宝小程序',
                label: '支付宝小程序',},
              {value: 'RN',
                label: 'RN',},
              {value: '其他',
                label: '其他',},
            ],
          },
          { value: '大数据.人工智能',
            label: '大数据.人工智能',
            children: [
              {value: '数据采集',
                label: '数据采集',},
              {value: '数据分析',
                label: '数据分析',},
              {value: '人脸识别',
                label: '人脸识别',},
              {value: '其他',
                label: '其他',},
            ]},
        ],
        selectedOptions: [],
        selectedOptions2: [],
      }
    },
    methods: {

      getFile: function (evente) {
        this.file = event.target.files[0];
        console.log(this.file);
      },
      getFilee: function (event) {
        this.filee = event.target.files[0];
        console.log(this.filee);
      },
      submit: function (event) {
        //阻止元素发生默认的行为
        var _this=this
        event.preventDefault();
        let formData = new FormData();
        console.log(formData)
        formData.append("file", this.file)
        axios.post('/upload/singlefile', formData)
          .then(function (response) {
            alert(response.data);
            console.log(response);
            var a= response.data;
            //var e=a.split("*");
            //console.log(e[1])
            _this.file=a;
            // window.location.reload();
          })
          .catch(function (error) {
            alert("上传失败");
            console.log(error);
            //window.location.reload();
          });
      },
      submite: function (event) {
        var _this=this
        //阻止元素发生默认的行为
        event.preventDefault();
        let formData = new FormData();
        console.log(formData)
        formData.append("file", this.filee)
        axios.post('/upload/singlefile', formData)
          .then(function (response) {
            alert(response.data);
            console.log(response);
            var a= response.data;
            //  var e=a.split("*");
            // console.log(e[1])
            _this.filee=a;
          })
          .catch(function (error) {
            alert("上传失败");
            console.log(error);
            //window.location.reload();
          });
      },

      register(){



         var hh=this.selectedOptions.toString()

        if(this.InputName=="" || this. InputPrice==""||this.userTime==''|| this.textarea==""||this.file==''||this.filee=='')
        {
          this.$notify({
            title: '警告',
            message: '请填写注册信息',
            type: 'warning',
            duration:2000
          });
        }else{
          var user= JSON.parse(window.sessionStorage.getItem("user"));
          this.id=user.id
          axios.post('/workroom/appendProject',{


            id: this.id,
            lable:hh,
            projectname:this.InputName,
            price:this.InputPrice,
            introduction:this.textarea,
            usetime:this. userTime,
            photo: this.file,
            doc:this.filee,

          }).then((response) => {
            if(response.data.states=800){
              this.$notify({
                title: '成功',
                message: '注册成功',
                type: 'success',
                duration:1000
              });
              this.$router.replace('/AppendFinshWork');
            }else{
              this.$notify.error({
                title: '错误',
                message: response.data.message,
                type: 'warning',
                duration:0
              });
            }
          }).catch((response)=>{

          })
        }

      },


    }



  }
</script>

<style scoped>

</style>
